<template>
  <div class="content">
    <div class="tops">
      <div class="top">
        <div class="u2">
          <span :class="isShowA == 0 ? 'one' :'five'"
                @click="bindClickA(0)">近一年</span>
          <span :class="isShowA == 1 ? 'one' :'five'"
                @click="bindClickA(1)">近五年</span>
        </div>
      </div>
      <Statistics :option="option"></Statistics>
    </div>
    <div class="buttom">
      <div class="but-left">
        <div class="box">
          <h6>销售品种</h6>
          <div class="top">
            <div class="u2">
              <span :class="isShowB == item.id ? 'one' :'five'"
                    v-for="(item,id) in sequenceList"
                    :key="id"
                    @click="bindClickB(item.id)">{{item.name}}</span>
            </div>
          </div>
          <CcTable :headData="headData"
                   :tableData="tableData1"
                   :height="height2"
                   :height1="heig"
                   :height2="height4"
                   @trading="bandtrading"
                   v-if="tableData1.length > 0">
          </CcTable>
        </div>
      </div>
      <div class="but-right">
        <div class="top-data">
          <div class="box">
            <h6>采购走势图</h6>
            <!-- <div class="top">
              <div class="u2">
                <span :class="isShowD == 0 ? 'one' :'five'"
                      @click="bindClickD(0)">近一年</span>
                <span :class="isShowD == 1 ? 'one' :'five'"
                      @click="bindClickD(1)">近五年</span>
              </div>
            </div> -->
            <div class="chart">
              <TowHistogram :option="threeHistogramData"></TowHistogram>
            </div>
          </div>
          <div class="box border">
            <h6>各品种占比图</h6>
            <div class="top">
              <div class="u2">
                <span :class="isShowC == 0 ? 'one' :'five'"
                      @click="bindClickC(0)">采购量销售额</span>
                <span :class="isShowC == 1 ? 'one' :'five'"
                      @click="bindClickC(1)">采购额销售量</span>
              </div>
            </div>
            <div class="chart">
              <PieChart :option="originData"></PieChart>
            </div>
          </div>
        </div>
        <div class="but-data">
          <div class="con-Box">
            <div class="item">
              <div class="top">
                <div class="u2">
                  <span :class="isShowE == 0 ? 'one' :'five'"
                        @click="bindClickE(0)">总销售销售额</span>
                  <span :class="isShowE == 1 ? 'one' :'five'"
                        @click="bindClickE(1)">总销售销售量</span>
                </div>
              </div>
              <Proportion :option="originDataA"></Proportion>
            </div>
            <div class="item">
              <div class="top">
                <div class="u2">
                  <span :class="isShowF == 0 ? 'one' :'five'"
                        @click="bindClickF(0)">国际销售销售额</span>
                  <span :class="isShowF == 1 ? 'one' :'five'"
                        @click="bindClickF(1)">国际销售销售量</span>
                </div>
              </div>
              <Proportion :option="originDataB"></Proportion>
            </div>
            <div class="item borderNone">
              <div class="top">
                <div class="u2">
                  <span :class="isShowG == 0 ? 'one' :'five'"
                        @click="bindClickG(0)">国内销售销售额</span>
                  <span :class="isShowG == 1 ? 'one' :'five'"
                        @click="bindClickG(1)">国内销售销售量</span>
                </div>
              </div>
              <Proportion :option="originDataC"></Proportion>
            </div>
          </div>
          <div class="con-list">
            <div class="desc"
                 v-for="item in varietySalesProportions"
                 :key="item.id">
              <span :style="item.color"></span>
              <div class="title">{{item.dishName}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { httpVarietySummaryChart, httpPurchasingTrendChart, httpVarietyPurchaseChart, httpVarietyPurchaseProportionChart, httpPopulationSalesChart, httpInternationalSalesChart, httpDomesticSalesChart, httpListDishName } from '@/common/api/api'


import Statistics from '../../components/statistics.vue'
import CcTable from '../../components/cc-table.vue'
import PieChart from '../../components/pieChart.vue'
import TowHistogram from '../../components/towHistogram.vue'
import Proportion from '../../components/proportion.vue'

// import TonghaiMap from '../../components/tonghaiMap.vue'
// import Column from '../../components/column.vue'
// import Histogram from '../../components/histogram.vue'

export default {
  components: {
    // FoldedColumnMixing,
    Statistics,
    CcTable,
    PieChart,
    TowHistogram,
    Proportion
    // TonghaiMap,
    // Column,
    // Histogram
  },
  data () {
    return {
      isShowA: 0,
      isShowB: 0,
      isShowC: 0,
      isShowD: 0,
      isShowE: 0,
      isShowF: 0,
      isShowG: 0,
      option: [
        // { id: 1, dataValue: '248.6', unit: '万吨', dataName: '近一年采购总量', color: 'color:#64B7EC' },
        // { id: 2, dataValue: '39.48', unit: '亿元', dataName: '近一年采购总额', color: 'color:#F56E6A' },
        // { id: 3, dataValue: '212.5', unit: '万吨', dataName: '近一年销售总量', color: 'color:#F69E0D' },
        // { id: 4, dataValue: '77.6', unit: '亿元', dataName: '近一年销售总额', color: 'color:#6EC71E' },
        // { id: 1, dataValue: '74.286', unit: '万吨', dataName: '近一年国际销售量', color: 'color:#818AF8' },
        // { id: 2, dataValue: '28.261', unit: '亿元', dataName: '近一年国际销售额', color: 'color:#FFCC00' },
        // { id: 3, dataValue: '138.21', unit: '万吨', dataName: '近一年国内销售量', color: 'color:#BE55E1' },
        // { id: 4, dataValue: '49.34 ', unit: '亿元', dataName: '近一年国内销售额', color: 'color:#31DE9B' },
      ],

      headData: ['菜品名称', '采购量(万吨）', '采购额(亿元）'],
      height2: { height: '14rem' },
      height4: { height: '86%' },
      heig: { height: '4%' },
      tableData1: [
        // { date: '大白菜', area: '68', name: '10.2', id: 1 },
        // { date: '结球甘蓝', area: '41', name: '10.6', id: 2 },
        // { date: '莴苣', area: '20', name: '19.8', id: 3 },
        // { date: '萝卜', area: '21', name: '3.4', id: 4 },
        // { date: '大蒜', area: '14', name: '6.6', id: 5 },
        // { date: '芹菜', area: '10.7', name: '6.4', id: 6 },
        // { date: '花椰菜', area: '10.6', name: '6.3', id: 7 },
        // { date: '青花菜', area: '6.5', name: '2.6', id: 8 },
        // { date: '鲜食玉米', area: '3.5', name: '2.4', id: 9 },
        // { date: '菜豆', area: '3.6', name: '2.8', id: 10 },
      ],
      histogramA: {
        unit: '单位：万吨',
      },
      columnA: {
        unitA: '单位:万吨',
        yearData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        seriesData: [10.84, 9.85, 10.50, 10.45, 10.52, 10.43, 9.50, 9.63, 10.08, 10.27, 10.45, 10.54],
        color: 'rgba(245, 110, 106, 1)'
      },
      columnB: {
        unitA: '单位:万吨',
        yearData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        seriesData: [19.13, 23.35, 30.26, 19.55, 40.52, 20.93, 29.50, 33.53, 52.08, 30.27, 20.45, 50.54],
        color: 'rgba(246, 158, 13, 1)'
      },
      sequenceList: [
        { id: 0, name: '销售量' },
        { id: 1, name: '销售总体' },
        { id: 2, name: '国际销售' },
        // { id: 3, name: '国内销售' },
      ],
      originData: [
        {
          value: 21.7,
          name: '华宁'
        },
        {
          value: 16.6,
          name: '江川'

        },
        {
          value: 15.9,
          name: '雄关'
        },
        {
          value: 12.4,
          name: '建水'
        },
        {
          value: 10.8,
          name: '普宁'
        },
        {
          value: 8.5,
          name: '嵩明'
        },
        {
          value: 5.5,
          name: '寻甸'

        },
        {
          value: 3.9,
          name: '陆良'
        },
        {
          value: 2.1,
          name: '元谋'
        },
        {
          value: 1.2,
          name: '祥云'
        },
        {
          value: 0.8,
          name: '宜良'
        },
        {
          value: 0.4,
          name: '泸西'
        },
        {
          value: 0.2,
          name: '弥勒'
        },
      ],
      originDataA: [],
      originDataB: [],
      originDataC: [],
      threeHistogramData: {
        xAxis: {
          data: []
        },
        yAxis: {
          max: 100,
          interval: 20,
          name: '单位:亩'
        },
        one: {
          name: '采购量',
          data: [],
          color: 'rgba(79, 168, 249, 1)'
        },
        tow: {
          name: '采购额',
          data: [],
          color: 'rgba(255, 204, 0, 1)'
        }
      },
      varietyPurchaseChart: {},
      varietySummaryListOneYear: [],
      varietySalesProportions: []
    }
  },
  methods: {
    bindClickA (e) {
      if (e == 0) {
        this.isShowA = e
        this.option = this.varietySummaryChart.varietySummaryListOneYear
      } else {
        this.isShowA = e
        this.option = this.varietySummaryChart.varietySummaryListFiveYear
      }
    },
    bindClickB (e) {
      if (e == 0) {
        this.isShowB = e
        this.tableData1 = this.varietyPurchaseChart.varietyPurchaseList
      } else if (e == 1) {
        this.isShowB = e
        this.tableData1 = this.varietyPurchaseChart.varietyOverallSalesList
      } else if (e == 2) {
        this.isShowB = e
        this.tableData1 = this.varietyPurchaseChart.varietyInternationalSalesList
      }
    },
    bindClickC (e) {
      if (e == 0) {
        this.isShowC = e
        this.originData = this.varietyPurchaseProportionChart.purchaseAmountProportions
      } else {
        this.isShowC = e
        this.originData = this.varietyPurchaseProportionChart.purchaseQuantityProportions
      }
    },
    bindClickD (e) {
      if (e == 0) {
        this.isShowD = e
      } else {
        this.isShowD = e
      }
    },
    bindClickE (e) {
      if (e == 0) {
        this.isShowE = e
        this.originDataA = this.varietySalesProportionChart.populationSalesAmounts
      } else {
        this.isShowE = e
        this.originDataA = this.varietySalesProportionChart.populationSalesVolumes
      }
    },
    bindClickF (e) {
      console.log(e);
      if (e == 0) {
        this.isShowF = e
        this.originDataB = this.varietySalesProportionChart.internationalSalesAmounts
      } else {
        this.isShowF = e
        this.originDataB = this.varietySalesProportionChart.internationalSalesVolumes
      }
    },
    bindClickG (e) {
      if (e == 0) {
        this.isShowG = e
        this.originDataC = this.varietySalesProportionChart.domesticSalesAmounts

      } else {
        this.isShowG = e
        this.originDataC = this.varietySalesProportionChart.domesticSalesVolumes
      }
    },
    bandtrading (e) {
      this.dishName = e.dishName
      this.getPurchasingTrendChart()
    },
    getVarietySummaryChart () {
      httpVarietySummaryChart().then(res => {
        const { varietySummaryChart } = res.data
        this.varietySummaryChart = varietySummaryChart
        const varietySummaryListOneYear = varietySummaryChart.varietySummaryListOneYear
        const varietySummaryListFiveYear = varietySummaryChart.varietySummaryListFiveYear
        const colorMap = {
          近一年采购量: '#64B7EC',
          近一年采购额: '#F56E6A',
          近一年销售量: '#F69E0D',
          近一年销售额: '#6EC71E',
          近一年国际销售量: '#818AF8',
          近一年国际销售额: '#FFCC00',
          近一年国国内销售量: '#BE55E1',
          近一年国内售额: '#31DE9B'
        }
        const arrList = varietySummaryListOneYear.map(v => {
          v.color = `color: ${colorMap[v.dataName]}`
          return v
        })
        const colorMapFive = {
          近五年采购量: '#64B7EC',
          近五年采购额: '#F56E6A',
          近五年销售量: '#F69E0D',
          近五年销售额: '#6EC71E',
          近五年国际销售量: '#818AF8',
          近五年国际销售额: '#FFCC00',
          近五年国内销售量: '#BE55E1',
          近五年国内销售额: '#31DE9B'
        }
        varietySummaryListFiveYear.map(v => {
          v.color = `color: ${colorMapFive[v.dataName]}`
          return v
        })
        this.option = arrList
      })
    },
    getVarietyPurchaseChart () {
      httpVarietyPurchaseChart().then(res => {
        const { varietyPurchaseChart, } = res.data
        this.varietyPurchaseChart = varietyPurchaseChart
        this.tableData1 = varietyPurchaseChart.varietyPurchaseList
      });

    },
    getPurchasingTrendChart () {
      const dishName = this.dishName ? this.dishName : this.tableData1[0].dishName
      httpPurchasingTrendChart(dishName).then(res => {
        const { purchasingTrendChart } = res.data
        this.threeHistogramData.xAxis.data = purchasingTrendChart.yearList
        this.threeHistogramData.tow.data = purchasingTrendChart.purchaseAmountList
        this.threeHistogramData.one.data = purchasingTrendChart.purchaseQuantityList
      })
    },
    getVarietyPurchaseProportionChart () {
      httpVarietyPurchaseProportionChart().then(res => {
        const { varietyPurchaseProportionChart } = res.data
        const arr = varietyPurchaseProportionChart.purchaseAmountProportions //销售额
        const arr1 = varietyPurchaseProportionChart.purchaseQuantityProportions //销售量
        var keyMap = {
          "dishName": "name",
          "purchaseAmountProportion": "value",
        };
        for (var i = 0; i < arr.length; i++) {
          var obj = arr[i];
          for (var key in obj) {
            var newKey = keyMap[key];
            if (newKey) {
              obj[newKey] = obj[key];
              delete obj[key];
            }
          }
        }
        var keyMap1 = {
          "dishName": "name",
          "purchaseQuantityProportion": "value",
        };
        for (var j = 0; j < arr1.length; j++) {
          var obj1 = arr1[j];
          for (var key1 in obj1) {
            var newKey1 = keyMap1[key1];
            if (newKey1) {
              obj1[newKey1] = obj1[key1];
              delete obj1[key1];
            }
          }
        }
        this.varietyPurchaseProportionChart = varietyPurchaseProportionChart
        this.originData = varietyPurchaseProportionChart.purchaseAmountProportions
      })
    },
    getPopulationSalesChart () {
      httpPopulationSalesChart().then(res => {
        const { varietySalesProportionChart } = res.data
        const arr = varietySalesProportionChart.populationSalesAmounts
        const arr1 = varietySalesProportionChart.populationSalesVolumes
        var keyMap = {
          "dishName": "name",
          "populationSalesAmount": "value",
        };
        for (var i = 0; i < arr.length; i++) {
          var obj = arr[i];
          for (var key in obj) {
            var newKey = keyMap[key];
            if (newKey) {
              obj[newKey] = obj[key];
              delete obj[key];
            }
          }
        }
        var keyMap1 = {
          "dishName": "name",
          "populationSalesVolume": "value",
        };
        for (var j = 0; j < arr1.length; j++) {
          var obj1 = arr1[j];
          for (var key1 in obj1) {
            var newKey1 = keyMap1[key1];
            if (newKey1) {
              obj1[newKey1] = obj1[key1];
              delete obj1[key1];
            }
          }
        }
        this.varietySalesProportionChart = varietySalesProportionChart
        this.originDataA = varietySalesProportionChart.populationSalesAmounts

      })
    },
    getInternationalSalesChart () {
      httpInternationalSalesChart().then(res => {
        const { varietySalesProportionChart } = res.data
        const arr = varietySalesProportionChart.internationalSalesAmounts
        const arr1 = varietySalesProportionChart.internationalSalesVolumes
        var keyMap = {
          "dishName": "name",
          "internationalSalesAmount": "value",
        };
        for (var i = 0; i < arr.length; i++) {
          var obj = arr[i];
          for (var key in obj) {
            var newKey = keyMap[key];
            if (newKey) {
              obj[newKey] = obj[key];
              delete obj[key];
            }
          }
        }
        var keyMap1 = {
          "dishName": "name",
          "internationalSalesVolume": "value",
        };
        for (var j = 0; j < arr1.length; j++) {
          var obj1 = arr1[j];
          for (var key1 in obj1) {
            var newKey1 = keyMap1[key1];
            if (newKey1) {
              obj1[newKey1] = obj1[key1];
              delete obj1[key1];
            }
          }
        }
        console.log("国际", res);
        this.originDataB = varietySalesProportionChart.internationalSalesAmounts
        this.varietySalesProportionChart = varietySalesProportionChart

      })
    },
    getDomesticSalesChart () {
      httpDomesticSalesChart().then(res => {
        console.log("Resssssss", res);
        const { varietySalesProportionChart } = res.data
        const arr = varietySalesProportionChart.domesticSalesAmounts
        const arr1 = varietySalesProportionChart.domesticSalesVolumes
        var keyMap = {
          "dishName": "name",
          "domesticSalesAmount": "value",
        };
        for (var i = 0; i < arr.length; i++) {
          var obj = arr[i];
          for (var key in obj) {
            var newKey = keyMap[key];
            if (newKey) {
              obj[newKey] = obj[key];
              delete obj[key];
            }
          }
        }
        var keyMap1 = {
          "dishName": "name",
          "domesticSalesVolume": "value",
        };
        for (var j = 0; j < arr1.length; j++) {
          var obj1 = arr1[j];
          for (var key1 in obj1) {
            var newKey1 = keyMap1[key1];
            if (newKey1) {
              obj1[newKey1] = obj1[key1];
              delete obj1[key1];
            }
          }
        }
        this.originDataC = varietySalesProportionChart.domesticSalesAmounts
        this.varietySalesProportionChart = varietySalesProportionChart
      })
    },
    getListDishName () {
      httpListDishName().then(res => {
        const { varietySalesProportions } = res.data
        const colorMap = {
          大白菜: '#6666cc',
          结球甘蓝: '#99cc66',
          莴苣: '#ffcc66',
          萝卜: '#ff6666',
          大蒜: '#66cccc',
          芹菜: '#339966',
          花椰菜: '#ff9966',
          青花菜: '#9966cc',
          鲜食玉米: '#ff66cc',
          菜豆: '#6666cc',
          鲜食豌豆: '#99cc66',
          洋葱: '#ffcc66',
          辣椒: '#ff6666',
          西葫芦: '#66cccc',
          苤蓝: '#339966'
        }
        varietySalesProportions.map(v => {
          v.color = `background: ${colorMap[v.dishName]}`
          return v
        })
        console.log("arrList", varietySalesProportions);
        this.varietySalesProportions = varietySalesProportions
        // this.arrList = arrList
      })
    }
  },
  created () {
    this.getVarietyPurchaseChart()
    this.getVarietySummaryChart()
    this.getVarietyPurchaseProportionChart()
    this.getPopulationSalesChart()
    this.getInternationalSalesChart()
    this.getDomesticSalesChart()
    this.getListDishName()
  },
  mounted () {
    setTimeout(() => {
      this.getPurchasingTrendChart()
    }, 100)
  }
}
</script>

<style scoped>
.content {
  /* display: flex; */
  overflow: hidden;
}
.content .tops {
  background: #fff;
  position: relative;
}
.content .tops h6 {
  padding: 0.25rem 0 0 0.25rem;
}
.content .tops .top .u2 {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
}
.content .buttom {
  display: flex;
  margin-top: 0.25rem;
}

.content .buttom .but-left {
  background: #fff;
  width: 20vw;
}

.buttom .but-left h6 {
  border-left: 0.05rem solid #487eea;
  padding-left: 0.15rem;
  margin: 0.25rem 0 0 0.25rem;
}

.box .top {
  display: flex;
  padding: 0.25rem 0;
  align-content: center;
  justify-content: center;
}

.u2 .one {
  width: 1rem;
  height: 0.325rem;
  background: #487eea;
  font-size: 0.175rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  border: 1px solid #e4e4e4;
  text-align: center;
  line-height: 0.325rem;
  border-left-style: none;
  padding: 0.05rem 0.075rem;
}
.u2 .five {
  width: 1rem;
  height: 0.325rem;
  background: #fff;
  font-size: 0.175rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #666666;
  border: 1px solid #e4e4e4;
  text-align: center;
  line-height: 0.325rem;
  padding: 0.05rem 0.075rem;
}

.content .buttom {
}
.content .buttom .but-right {
  width: 80vw;
  margin-left: 0.25rem;
}
.top-data {
  display: flex;
  flex-direction: row;
  background: #fff;
  border-bottom: 1px dashed #ccc;
}
.top-data .box {
  width: 50%;
  height: 100%;
  position: relative;
}
.top-data .border {
  border-left: 1px dashed #ccc;
}
.top-data .box .chart {
  height: 4.4rem;
}
.top-data .box .top .u2 {
  position: absolute;
  top: 0.25rem;
  right: 0.225rem;
}
.top-data .box h6 {
  border-left: 0.05rem solid #487eea;
  padding-left: 0.15rem;
  margin: 0.25rem 0 0 0.25rem;
}
.but-data {
  width: 100%;
  height: 100%;
  background: #fff;
}
.but-data .con-Box {
  display: flex;
}
.but-data .con-Box .item {
  width: 33.33%;
  height: 50vh;
  position: relative;
  border-right: 1px dashed #ccc;
  margin-top: 0.25rem;
}
.but-data .con-Box .borderNone {
  border-right: none;
}
.con-Box .item .top {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0.375rem;
}
.con-list {
  display: flex;
  padding: 0 3.625rem;
  margin-top: 0.625rem;
  flex-wrap: wrap;
}
.con-list .desc {
  display: flex;
  align-items: center;
  margin-right: 0.375rem;
}
.con-list .desc span {
  width: 0.1rem;
  height: 0.1rem;
  border-radius: 1px;
}
.con-list .desc .title {
  font-size: 0.15rem;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
  padding-left: 0.0625rem;
}
/* sd  */
/* .content .left {
  box-sizing: content-box;
  box-sizing: border-box;
  width: 25%;
}
.left-tow {
  background: #ffffff;
  margin-top: 0.125rem;
}
.left-one {
  height: 4.8125rem;
  background: #ffffff;
  margin-top: 0.125rem;
}
.left-tow .box {
  padding-top: 0.25rem;
  margin-left: 0.15rem;
}
.left-one .box {
  padding-top: 0.25rem;
  margin-left: 0.15rem;
}
.left-tow .box h6 {
  border-left: 0.05rem solid #487eea;
  padding-left: 0.15rem;
}
.left-one .box h6 {
  border-left: 0.05rem solid #487eea;
  padding-left: 0.15rem;
}
.left-one .box .unit {
  padding-top: 0.375remx;
  display: flex;
  justify-content: space-around;
}
.left-one .box .map {
  display: flex;
  justify-content: space-between;
}
.left-one .box .map #one {
  width: 2.5rem;
  height: 2.5rem;
}
.left-one .box .map #two {
  width: 2.5rem;
  height: 2.5rem;
}
.left-one .box #three {
  height: 4.375rem;
}

.left-one .box .button {
  display: flex;
  justify-content: space-around;
}
.box .button p {
  padding-left: 0.125rem;
}
.box .button p:nth-child(1) {
  border-left: 0.2rem solid #818af8;
}
.box .button p:nth-child(2) {
  border-left: 0.2rem solid #f69e0d;
}
.box .button p:nth-child(3) {
  border-left: 0.2rem solid #64b7ec;
}
.box .button p:nth-child(4) {
  border-left: 0.2rem solid #f56e6a;
}
.right-one {
  height: 4rem;
  background: #ffffff;
  margin-top: 10px;
}
.content .center {
  flex: 1;
  background: #ffffff;
  margin: 0.125rem;
}
.content .center .buttom {
  margin-left: 0.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.buttom .u2 {
  padding-right: 0.625rem;
}
.buttom .u2 .one {
  width: 1rem;
  height: 0.325rem;
  background: #487eea;
  font-size: 0.175rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  border: 1px solid #e4e4e4;
  text-align: center;
  line-height: 0.325rem;
  border-left-style: none;
  padding: 0.05rem 0.075rem;
}
.buttom .u2 .five {
  width: 1rem;
  height: 0.325rem;
  background: #fff;
  font-size: 0.175rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #666666;
  border: 1px solid #e4e4e4;
  text-align: center;
  line-height: 0.325rem;
  padding: 0.05rem 0.075rem;
}
.content .center .buttom h6 {
  border-left: 0.05rem solid #487eea;
  padding-left: 0.15rem;
}
.left-one .box .top {
  display: flex;
  justify-content: space-between;
  padding-top: 0.225rem;
  padding-right: 0.2rem;
}
.box .top {
  position: relative;
}
.left-one .box .top .u1 {
  font-size: 0.15rem;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}
.box .top .u2 {
  position: absolute;
  right: 0.375rem;
  bottom: -0.5875rem;
  z-index: 9999;
}
.box .top .u2 .one {
  width: 1rem;
  height: 0.325rem;
  background: #487eea;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  border: 1px solid #e4e4e4;
  text-align: center;
  line-height: 0.325rem;
  border-left-style: none;
  padding: 0.05rem 0.075rem;
}
.box .top .u2 .five {
  width: 1rem;
  height: 0.325rem;
  background: #fff;
  font-size: 0.175rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #666666;
  border: 1px solid #e4e4e4;
  text-align: center;
  line-height: 0.325rem;
  padding: 0.05rem 0.075rem;
} */
</style>
